<template>
  <div class="common-layout">
    <!-- title query -->
    <title-section :queryPlaceholder="'工单编号'" @query-change="queryChange">
      <template #queryCom>
        <el-input
          v-model="form.ProcessName"
          clearable
          style="width: 150px;margin-left: 10px;"
          placeholder="工序名称"
        />
      </template>
      <template #btnCom>
        <el-button type="warning" @click="auditChange(1)"
          ><i class="el-icon-video-play"></i>审批通过</el-button
        >
        <el-button type="warning" @click="auditChange(0)"
          ><i class="el-icon-video-play"></i>审批不通过</el-button
        >
      </template>
    </title-section>
    <!-- table -->
    <div class="table-info mes-table">
      <data-table
        ref="dataTableRef"
        :tableKey="tableKey"
        @sort-change="sortChange"
        @table-selection-change="tableSelectionChange"
      >
        <template #auditorStatus="{ row }">
          <el-tag :type="getAuditStatus(row.auditorStatus).type">
            {{ getAuditStatus(row.auditorStatus).info }}</el-tag
          >
        </template>
        <template #workOrderCode="{ row }">{{ row.workOrderCode }}</template>
      </data-table>
      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="[15, 30, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 审核弹框选择仓库 -->
    <dialog-com
      ref="dialogComRef"
      :title="'仓库信息'"
      :width="840"
      @confirm-change="confirmChange"
      @close-change="closeChange"
    >
      <template #content>
        <div style="margin-bottom: 10px">
          <el-input
            v-model="warehouse"
            clearable
            style="width: 150px"
            placeholder="仓库编号"
          />
          <el-button
            type="primary"
            :icon="Search"
            style="margin-left: 10px"
            @click="queryWarehouseChange"
          >
            <i class="el-icon-search"></i>查询
          </el-button>
        </div>
        <data-table
          ref="warehouseDialogTableRef"
          :tableKey="warehouseTableKey"
          @table-selection-change="warehouseSelectionChange"
        >
          <template #disabled="{ row }">{{ row.disabled ? "是" : "否" }}</template>
        </data-table>
      </template>
    </dialog-com>
  </div>
</template>

<script>
import TitleSection from "../../componentsNew/TitleSection.vue";
import DataTable from "../../componentsNew/DataTable.vue";
import DialogCom from "../../componentsNew/DialogCom.vue";

import { myMethod } from "../../uitils/overWork.js";
export default {
  components: {
    TitleSection,
    DataTable,
    DialogCom,
  },
  data() {
    return {
      tableLoading: false,
      currentPage: 1,
      pageSize: 15,
      totalPage: 0,
      tableKey: [
        {
          value: "workOrderCode",
          name: "工单编码",
          minWidth: "180",
          sortable: false,
          slot: true,
        },
        { value: "processName", name: "工序名称", minWidth: "180" },
        { value: "inventoryName", name: "存货名称", minWidth: "180" },
        {
          value: "reportQty",
          name: "报工数",
          minWidth: "100",
          algin: 'center'
        },
        {
          value: "goodQty",
          name: "良品数",
          minWidth: "100",
          algin: 'center'
        },
        {
          value: "noGoodQty",
          name: "不良品数",
          minWidth: "100",
          algin: 'center'
        },
        {
          value: "auditorStatus",
          name: "审核状态",
          minWidth: "150",
          slot: true,
        },
        {
          value: "auditor",
          name: "审核人",
          minWidth: "100",
        },
        {
          value: "auditorDate",
          name: "审批时间",
          minWidth: "160",
        },
        {
          value: "createDate",
          name: "创建时间",
          minWidth: "160",
        },
        {
          value: "creator",
          name: "创建人",
          minWidth: "120",
        },
      ],
      tableSelection: [],
      form: {},
      selectAuditType: 1, // 1 审核通过   0 审核不通过
      warehouseTableKey: [
        {
          value: "warehouseCode",
          name: "仓库编号",
          minWidth: 180,
          align: "left",
        },
        {
          value: "warehouseName",
          name: "仓库名称",
          minWidth: 180,
          align: "left",
        },
        { value: "address", name: "仓库地址", minWidth: 130, align: "left" },
        { value: "remark", name: "备注", minWidth: 110, align: "left" },
        {
          value: "disabled",
          name: "是否停用",
          minWidth: 110,
          align: "left",
          slot: true,
        },
      ],
      warehouse: "",
      warehouseSelection: [], // 选中仓库数据
    };
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    ...myMethod,
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/index.less";
</style>
